<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>


    <!-- 
    vue模板语法有两大类:

    1.插值语法:
    功能:用于解析标签体内容 标签夹着的内容
    写法:{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

    2.指令语法:
    功能: 用于解析标签 (包括：标签属性、标签体内容、绑定事件....) 
    举例: v-bind:href="xxx" 或者简写为:href"xxx" xxx同样要写js表达式，且可以直接读取到data中的属性所有属性

    value中有很多属性，且形式都是v-??? 
-->


    <div id="root">
        <!-- v-bind给标签属性动态绑定值 -->

        <h2>hello,余逍遥,{{name}}</h2>
        <!-- 使用v-bind绑定之后，“” 里面的代码就会被当成表达式去执行而不是字符串 -->
        <!-- <a v-bind:href="url">点我去{{address}}学习</a> -->
        <br>
        <a v-bind:href="learn.url">点我去{{learn.address}}学习</a>

    </div>
    <script>
        Vue.config.productionTip = false
        // 这里可以不用一个变量来接住vue实例
        const x = new Vue({
            el: '#root',
            /*  data: {
                 name: '今天开始vue的第一行代码练习',
                 address: '百度',
                 url: 'http://www.baidu.com'
             } */
            data: {
                name: '今天开始vue的第一行代码练习',
                //属性设置成多级结构可以用于防止属性名冲突
                learn: {
                    address: '百度',
                    url: 'http://www.baidu.com'
                }
            }

        })
    </script>
</body>

</html>